<template>
  <div class="pre-plan">
    <el-row class="search" type="flex" justify="space-between" align="center">
      <el-form class="order-search" size="small">
        <el-row type="flex">
          <el-form-item class="order-w" prop="cj" style="width: 150px">
            <el-select v-model="order" clearable>
              <template #prefix>订单类型：</template>
              <el-option
                v-for="item in orderOption"
                :key="item.id"
                :label="item['key_value']"
                :value="item['key_value']"
              />
            </el-select>
          </el-form-item>
        </el-row>
      </el-form>
      <ul class="tab-btn">
        <li
          :class="{ active: active == item.value }"
          v-for="(item, index) in tablist"
          :key="index"
          @click="toggleTab(item.value)"
        >
          <img :src="require(`@/assets/img/${item.img}.png`)" width="16" />
        </li>
      </ul>
    </el-row>
    <div class="content">
      <component
        :ref="active"
        :is="active"
        @openAddOrderDialog="openAddOrderDialog"
        @openOrderDrawerDialog="openOrderDrawerDialog"
        @openAddPlanDialog="openAddPlanDialog"
      ></component>
    </div>
    <!-- 弹框 -->
    <add-order ref="addOrder"></add-order>
    <order-drawer ref="orderDrawer" @close="closeDialog"></order-drawer>
    <add-plan ref="addPlan"></add-plan>
  </div>
</template>

<script>
import calender from './calender.vue';
import pretable from './pretable.vue';
import addOrder from './components/addOrder.vue';
import orderDrawer from './components/orderDrawer.vue';
import addPlan from './components/addPlan.vue';
export default {
  components: { calender, pretable, addOrder, orderDrawer, addPlan },
  data() {
    return {
      active: 'calender',
      tablist: [
        { img: 'calender', value: 'calender' },
        { img: 'pretable', value: 'pretable' }
      ],
      order: ''
    };
  },
  computed: {
    cjOption() {
      return this.$store.getters.cjOption;
    },
    orderOption() {
      return this.$store.getters.orderTypeOption;
    }
  },
  created() {
    this.$EventBus.$on('openAddOrderDialog', val => {
      this.openAddOrderDialog(val);
    });
    this.$EventBus.$on('openOrderDrawerDialog', val => {
      this.openOrderDrawerDialog(val);
    });
  },
  methods: {
    // 增加订单量dialog
    openAddOrderDialog(val) {
      this.$refs['addOrder'].edit(val);
    },
    // 查看详情Drawer
    openOrderDrawerDialog(val) {
      this.$refs['orderDrawer'].edit(val);
    },
    // 新增计划
    openAddPlanDialog() {
      this.$refs['addPlan'].edit();
    },
    closeDialog() {
      this.$refs[this.active].getPlan();
    },
    toggleTab(val) {
      this.active = val;
    }
  }
};
</script>

<style lang="scss" scoped>
.pre-plan {
  height: 100%;
  background: #f6f9fc;
  overflow: hidden;
  .search {
    height: 32px;
    margin-bottom: 8px;
  }
  .tab-btn {
    list-style: none;
    margin: 0;
    display: flex;
    color: #000;
    li {
      width: 45px;
      height: 32px;
      background: #ebeef1;
      border-radius: 0px 4px 4px 0px;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      &.active {
        background: #fff;
      }
    }
  }
  .content {
    height: calc(100% - 40px);
    background: #fff;
    overflow-y: auto;
  }
  ::v-deep .pre-radio.el-radio-group {
    .el-radio-button__orig-radio:checked + .el-radio-button__inner {
      background-color: #fff;
      color: #2c67f6;
      border-color: #2c67f6;
    }
  }
}
</style>
<style lang="scss">
@import '~@/assets/css/preplan.scss';
</style>
